<template>
    <div class="goods-detail" v-for="goods in goodsList" :key="goods.productId">
        <img :src="goods.mainPicUrl || defaultImage" alt="" />
        <div>
            <div class="goods-name">{{ goods.productName }}</div>
            <div class="goods-info">
                <div>上架类目：{{ goods.preview }}</div>
                <div>型号：{{ goods.modeCode }}</div>
                <div>分类：{{ goods.categoryName }}</div>
                <div>
                    ID：{{ goods.collectId }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps(['goodsList','defaultImage']);
const emit=defineEmits(['openArea'])
</script>

<style lang="scss" scoped>
.goods-detail {
  display: flex;
  gap: 20px;
  line-height: 2;

  img {
    width: 150px;
    height: 150px;
    border-radius: 4px;
  }

  >div {
    width: 100%;
  }

  .goods-name {
    font-size: 18px;
    color: #007dff;
  }

  .goods-info {
    text-align: left;
    position: relative;
    width: 100%;

    .area {
      color: #007dff;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 0;

      .el-tag {
        margin-left: 8px;
      }
    }
  }
}
</style>